<template>
  <ul class="todo-list">
    <!-- completed: 完成的类名 -->
    <li :class="{completed:item.states}" v-for="(item,index) in getCotent" :key="index" v-show='show(item)'>
      <div class="view">
        <input class="toggle" type="checkbox" v-model="item.states"/>
        <label>{{item.title}}</label>
        <button class="destroy" @click="delBtn"></button>
      </div>
    </li>
  </ul>
  
</template>

<script>
import{mapGetters, mapState}from'vuex'
export default {

  computed:{
    ...mapGetters(['getCotent']),
...mapState('TodoHearder',['view'])
  },
methods: {
delBtn(){
  this.getCotent.splice(this.index,1)
},
    show(item){
      if(this.view=='all')return true
      if(this.view=='no'&&!item.states)return true
      if(this.view=='yes'&&item.states)return true
    }
},
}
</script>
